<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送费</title>
    <link rel="stylesheet" href="../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../css/index.css">
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=IH2BZ-LHWC5-FJDI3-I6ITE-SUKD3-NMF4B"></script>
    <style>
        .fixed {
            /* position: fixed; */
            width: 75%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            margin-right: 2%;
        }
    </style>
</head>

<body>
    <div id="app" class="minWidth">
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">店铺配送费方案</div>
            </div>
            <div style="display: flex;">
                <div class="fixed">
                    <div id="container" style="width: 100%;height: 100%;"></div>
                </div>
                <div>
                    <el-descriptions :column="1" border size="small">
                        <el-descriptions-item label="适用店铺">
                            <el-form-item prop="Store_SerialNumber"
                                :rules="{required: true, message: '请输入适用店铺', trigger: 'blur' }">
                                <el-select v-model="form.Store_SerialNumber" placeholder="请选择活动区域" style="width: 100%;"
                                    @change="getStore_Address">
                                    <el-option v-for="(item,index) in tabsname" :key="index" :label="item.Store_Name"
                                        :value="item.Store_SerialNumber"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="地址">
                            <el-form-item prop="address"
                                :rules="{required: true, message: '请输入搜索的地址', trigger: 'blur' }">
                                <el-input placeholder="请输入搜索的地址" v-model="address" @change="getAddress"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="经度">
                            <el-form-item prop="longitude"
                                :rules="{required: true, message: '请输入经度', trigger: 'blur' }">
                                <el-input placeholder="请输入经度" v-model="form.longitude"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="纬度">
                            <el-form-item prop="latitude" :rules="{required: true, message: '请输入纬度', trigger: 'blur' }">
                                <el-input placeholder="请输入纬度" v-model="form.latitude"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-switch style="display: block;margin-top: 10px;" v-model="value2" active-color="#409eff" inactive-color="#ff4949"
                        active-text="3D" inactive-text="2D" @change="handleSwitchChange">
                    </el-switch>
                </div>
            </div>
            <div style="margin-bottom: 120px;">
                <div v-if="!isUrl" class="table_titel">
                    <div class="titel">阶梯配送方案配置</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="add_system_model_mark">新增</el-button>
                        <el-button type="danger" size="small" @click="remove_system_model_mark">删除</el-button>
                    </div>
                </div>
                <el-descriptions :column="3" border size="small" v-for="(item,index) in form.Children.delivery_detail"
                    :key="index">
                    <el-descriptions-item :label="index+1+'.配送最远距离(千米)'">
                        <el-form-item :prop="'Children.delivery_detail.'+index+'.Delivery_Distance'"
                            :rules="{required: true, message: '配送最远距离不能为空', trigger: 'blur' }">
                            <el-input placeholder="请输入配送最远距离" v-model.trim="item.Delivery_Distance"></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="配送价格">
                        <el-form-item :prop="'Children.delivery_detail.'+index+'.Delivery_Amount'"
                            :rules="{required: true, message: '配送价格', trigger: 'blur' }">
                            <el-input placeholder="请输入配送价格" v-model.trim="item.Delivery_Amount"></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="免配送费金额">
                        <el-form-item :prop="'Children.delivery_detail.'+index+'.Sales_Amount'">
                            <el-input placeholder="请输入免配送费金额(不输入为默认没有免配送金额)"
                                v-model.trim="item.Sales_Amount"></el-input>
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../js/utils.js"></script>
    <script type="text/javascript" src="./js/Edit.js"></script>
</body>

</html>